<template>
  <section class="cms-body" v-loading="loading">
    <!-- 返回组件 -->
    <cms-back></cms-back>
    <el-form ref="form" :model="dataInfo" :rules="rules" class="cms-form" label-width="162px">

      <el-form-item label="广告名称" class="flex-50 " prop="advName">
        <el-input class="cms-width" v-model="dataInfo.advName"></el-input>
      </el-form-item>

      <!-- 是否启用 -->
      <el-form-item label="是否启用" class="flex-50 " prop="isEnabled">
        <el-radio-group v-model="dataInfo.isEnabled" class="cms-width">
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="广告分类" class="flex-100 " prop="adType">
        <el-radio-group v-model="dataInfo.advType" class="cms-width" @change="getChannelList(dataInfo.advType)">
          <el-radio :label="0">pc端广告</el-radio>
          <el-radio :label="1">mobile端广告</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="广告类型" class="flex-100 " prop="spaceType" v-if="dataInfo.advType==0">
        <el-radio-group v-model="dataInfo.spaceType" class="cms-width">
          <el-radio :label="1">首页广告</el-radio>
          <el-radio :label="2">频道广告</el-radio>
          <el-radio :label="3">爆料广告</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="选择频道" class="flex-50" v-if="dataInfo.spaceType==2 && dataInfo.advType==0" prop="targetName">
        <el-select @change="selectChange" v-model="dataInfo.channelName" clearable placeholder="请选择">
          <el-option v-for="item in channelList" :key="item.channelId" :label="item.channelName"
                     :value="item.channelId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="广告类型" class="flex-100 " prop="spaceType" v-if="dataInfo.advType==1">
        <el-radio-group v-model="dataInfo.spaceType" class="cms-width">
          <el-radio :label="1">推荐广告</el-radio>
          <el-radio :label="2">副刊广告</el-radio>
          <el-radio :label="3">频道广告</el-radio>
          <el-radio :label="4">首页弹窗广告</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="选择副刊" class="flex-50" v-if="dataInfo.spaceType==2 && dataInfo.advType==1" prop="targetName">
        <el-select @change="selectChange" v-model="dataInfo.targetId" clearable placeholder="请选择">
          <el-option v-for="item in specialChannelList" :key="item.channelId" :label="item.channelName"
                     :value="item.channelId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="选择频道" class="flex-50" v-if="dataInfo.spaceType==3 && dataInfo.advType==1" prop="targetName">
        <el-select @change="selectChange" v-model="dataInfo.targetId" clearable placeholder="请选择">
          <el-option v-for="item in channelList" :key="item.channelId" :label="item.channelName"
                     :value="item.channelId">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="广告位置" class="flex-100 " prop="spaceType" v-if="dataInfo.advType==0 &&dataInfo.spaceType==1">
        <el-radio-group v-model="dataInfo.position" class="cms-width">
          <el-radio :label="1">顶部右侧</el-radio>
          <el-radio :label="2">中间广告1</el-radio>
          <el-radio :label="3">中间广告2</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="广告位置" class="flex-100 " prop="spaceType" v-if="dataInfo.advType==0 &&dataInfo.spaceType==2">
        <el-radio-group v-model="dataInfo.position" class="cms-width">
          <el-radio :label="2" v-if="dataInfo.targetId==117">中间广告一</el-radio>
          <el-radio :label="4" v-if="dataInfo.targetId==111||dataInfo.targetId==2">底部广告</el-radio>
          <el-radio :label="1" v-else>顶部右侧</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="广告位置" class="flex-100 " prop="spaceType" v-if="dataInfo.advType==0 &&dataInfo.spaceType==3">
        <el-radio-group v-model="dataInfo.position" class="cms-width">
          <el-radio :label="1">顶部右侧</el-radio>
          <el-radio :label="4">底部广告</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="出现位置" class="flex-100" prop="position" v-if="dataInfo.advType==1 &&dataInfo.spaceType!=4">
        <el-input class="cms-width" v-model="dataInfo.position" type="number" placeholder="只能为数字（副刊广告位置为5的倍数+1）"></el-input>
      </el-form-item>

      <el-form-item label="链接地址" class="flex-100" prop="image_link">
        <el-input class="cms-width" v-model="dataInfo.image_link" placeholder="http或https开头"></el-input>
      </el-form-item>

      <el-form-item label="链接提示" class="flex-100" prop="image_title">
        <el-input class="cms-width" v-model="dataInfo.image_title"></el-input>
      </el-form-item>

      <el-form-item label="图片地址" class="flex-100 upload" prop="image_url">
        <cms-upload :src='dataInfo.image_url' class="cms-width" @change='getPath' :isMark="false"></cms-upload>
      </el-form-item>
      <el-form-item v-if="dataInfo.advType==0">
        <p style="color:red">顶部右侧 首页尺寸：300*326；爆料页面：300*250 其它频道页面：300*600</p>
        <p style="color:red">中间广告一 建议上传图片尺寸：722*92</p>
        <p style="color:red">中间广告二 建议上传图片尺寸：1920*240</p>
        <p style="color:red">底部广告 建议上传图片尺寸：1920*240</p>
      </el-form-item>

      <el-form-item v-if="dataInfo.advType==1">
        <span style="color:red">弹窗广告 建议上传图片尺寸：640*870</span>
        <span style="margin-left: 20px; color:red">推荐广告 建议上传图片尺寸：750*265</span>
        <span style="margin-left: 20px; color:red">频道广告 建议上传图片尺寸：700*580</span>
      </el-form-item>
      <el-form-item label="图片类型" class="flex-100 upload" v-show="false">
        <el-input class="cms-width" v-model="dataInfo.category"></el-input>
      </el-form-item>

      <el-form-item label="开始时间" class="flex-50" prop="startTime">
        <el-date-picker v-model="dataInfo.startTime" type="datetime" class="cms-width"
                        value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="结束时间" class="flex-50" prop="endTime">
        <el-date-picker v-model="dataInfo.endTime" type="datetime" class="cms-width"
                        value-format=" yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
      </el-form-item>

      <div class="form-footer">
        <el-button type="warning" v-if="isType('save')" @click="add(true)" v-perms="'/adv/save'">提交并继续添加</el-button>
        <el-button type="primary" v-if="isType('save')" @click="add(false)" v-perms="'/adv/save'">提交</el-button>
        <el-button type="primary" v-if="isType('update')" @click="update()" v-perms="'/adv/update'">修改</el-button>
        <el-button type="info" @click="$reset">重置</el-button>
        <span class="gray" v-if="isType('save')">选择“提交并继续添加”按钮会停留在添加页面；选择“提交”按钮后将跳转到对应的列表页</span>
      </div>

    </el-form>

  </section>
</template>
<script>
  import axios from "axios/index";
  import va from "@/rules";
  import formMixns from "@/mixins/form";

  export default {
    mixins: [formMixns], //普通表单变量
    data() {
      let required = va.required('此项必填');
      let checkSpaceType = (rule, value, callback) => {
        let advType = this.dataInfo.advType;
        if (advType == 1 && this.$myUtils.isNull(value)) {
          callback(new Error('mobile端广告,广告类型为必选项'));
        } else {
          callback();
        }
      }

      let checkPosition = (rule, value, callback) => {
        let advType = this.dataInfo.advType;
        let spaceType = this.dataInfo.spaceType;
        if (advType == 0) {
          callback();
        }
        if (advType == 1) {
          if (this.$myUtils.isNull(value)) {
            callback(new Error('广告位置为必填项'));
          }
          let result = (value - 1) % 5;
          if ((value == 1 && spaceType == 2) || (spaceType == 2 && result != 0)) {
            callback(new Error('广告类型为副刊广告,出现位置需要设置为5的倍数加1'));
          }
          callback();
        }
      }

      return {
        rules: {//校验规则
          advName: [required],
          position: [{validator: checkPosition, trigger: 'blur'}],
          isEnabled: [required],
          spaceType: [{validator: checkSpaceType, trigger: 'blur'}],
          image_url: [required],
          startTime: [required],
          endTime: [required]
        },
        dataInfo: {
          image_url:'',
          endTime: '',
          startTime: '',
          advName: '',
          advType: 1,
          isEnabled: 1
        },
        specialChannelList: [],
        channelList: []
      };
    },
    methods: {
      selectChange(val) {
        this.dataInfo.targetId = val;
      },
      getPath(url) {
        this.dataInfo.image_url = url;
      },
      getDataInfo(id, type) {
        axios.all([
          axios.post(this.$api.getSpecialChannelList, {}),
          axios.post(this.$api.advGet, {advId: id}),
        ]).then(
          axios.spread((specialChannelRes, advRes) => {
            this.specialChannelList = specialChannelRes.body;
            if (type == 'update') {
              let adv = advRes.body;
              let targetId = Number(adv.targetId);
              adv.targetId = targetId;
              this.dataInfo = adv;
              this.getChannelList(adv.advType);
            }
          })
        )
        this.loading = false;
      },
      getChannelList(advType) {
        axios.post(this.$api.getOneLevelChannelList, {advType: advType}).then(res => {
          if (res.code == '200') {
            this.channelList = res.body;
          }
        })
      },
      update() {
        this.updateDataInfo(this.$api.advUpdate, this.dataInfo, "pageList");
      },
      add(state) {
        this.saveDataInfo(state, this.$api.advSave, this.dataInfo, "pageList");
      },
    },
    created() {
      this.dataInfo.category = 'image';
      this.getChannelList(1);
      this.getDataInfo(this.id, this.type);
    }
  };
</script>
<style>
  .flex-50 {
    height: 63px;
  }

  .upload {
    height: 161px;
  }
</style>
